
import React, { Component } from 'react';
import {Route} from 'react-router-dom';

import "./index.css";
import { NavBar, TabBar } from "antd-mobile";

import BossMain from "../boss_main/BossMain";
import JobhunterinfoMain from "../jobhunter_main/JobhunterMain";
import BossMy from "../bossmy/BossMy";
import JobhunterMy from "../jobhunter_my/JobhunterMy";

import { connect } from "react-redux";
// redux中的方法regist 用connect关联 到Regist组件 
import { resetPath } from '../../redux/reducers/user.reducer.js';

class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
          selectedTab: 'redTab',
          hidden: false,
          fullScreen: false,
        };
      }
    
      render() {
        return (
            <div className="main_box">
                <div className="head_box">
                    <NavBar
                        mode="dark"
                        leftContent="Back"
                        >主页</NavBar>
                </div>

                {/* 中间界面 */}
                <Route path='/main/boss' component={BossMain}></Route>
                <Route path='/main/jobhunter' component={JobhunterinfoMain}></Route>
                <BossMy path="/boss/my" component={BossMy}></BossMy>
                <JobhunterMy path="/jobhunter/my" component={JobhunterMy}></JobhunterMy>
                 {/* 中间界面 */}

                {/* 底部 */}
                <div style={{width:'100%',position:"absolute",bottom:0}}>
                    <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    hidden={this.state.hidden}
                    >
                        {/* 一 icon */}
                    <TabBar.Item
                        title="Life"
                        key="Life"
                        icon={<div style={{
                        width: '22px',
                        height: '22px',
                        background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat' }}
                        />
                        }
                        selectedIcon={<div style={{
                        width: '22px',
                        height: '22px',
                        background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat' }}
                        />
                        }
                        selected={this.state.selectedTab === 'blueTab'}
                        badge={1}
                        onPress={()=>this.onPress('one')}
                        data-seed="logId"
                    >
                    </TabBar.Item>
                    {/* 二 icon */}
                    <TabBar.Item
                        icon={
                        <div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat' }}
                        />
                        }
                        selectedIcon={
                        <div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat' }}
                        />
                        }
                        title="Koubei"
                        key="Koubei"
                        badge={'new'}
                        selected={this.state.selectedTab === 'redTab'}
                        onPress={()=>this.onPress('two')}
                        data-seed="logId1"
                    >
                    </TabBar.Item>
                    

                    {/* 三 icon */}
                    <TabBar.Item
                        icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
                        selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
                        title="My"
                        key="my"
                        selected={this.state.selectedTab === 'yellowTab'}
                        onPress={()=>this.onPress('three')}
                    >
                    </TabBar.Item>
                    </TabBar>
                </div>
            </div>
        );
      }

      onPress(icon){
          console.log(icon)
          console.log(this.props.user)
      }
}

const mapStateToProps = (state,props)=>{
    return {
        user:state.userReducer
    }
}

export default connect(
    mapStateToProps,
    { resetPath }
)(Main)